#spaceRobot {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-top: 250px;
}

.spaceRobot {
  background-image: linear-gradient(#000203 0%, #00345E 85%, #004D89 100%);
}

.illustration {
  display: block;
  position: relative;
  width: auto;
  height: 90%;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.hover {
  width: 100%;
  height: 100%;
  animation: hover 5s ease-in-out infinite;
  animation-fill-mode: forwards;
}

.number-one {
  transform: translateY(-10px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-10 3589ms ease-in-out infinite;
  animation-fill-mode: forwards;
}

.number-two {
  transform: translateY(-20px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-20 3700ms ease-in-out infinite;
  animation-delay: 4003ms;
  animation-fill-mode: forwards;
}

.number-three {
  transform: translateY(-30px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-30 4801ms ease-in-out infinite;
  animation-delay: 2846ms;
  animation-fill-mode: forwards;
}

.number-four {
  transform: translateY(-50px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-50 3203ms ease-in-out infinite;
  animation-delay: 1788ms;
  animation-fill-mode: forwards;
}

.number-five {
  transform: translateY(-60px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-60 3863ms ease-in-out infinite;
  animation-delay: 5526ms;
  animation-fill-mode: forwards;
}

.number-six {
  transform: translateY(-70px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-70 3994ms ease-in-out infinite;
  animation-delay: 3849ms;
  animation-fill-mode: forwards;
}

.number-seven {
  transform: translateY(-80px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-80 2397ms ease-in-out infinite;
  animation-delay: 1873ms;
  animation-fill-mode: forwards;
}

.number-eight {
  transform: translateY(-90px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-90 2334ms ease-in-out infinite;
  animation-delay: 4176ms;
  animation-fill-mode: forwards;
}

.number-nine {
  transform: translateY(-100px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-100 2851ms ease-in-out infinite;
  animation-delay: 5545ms;
  animation-fill-mode: forwards;
}

.number-ten {
  transform: translateY(-110px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-110 3863ms ease-in-out infinite;
  animation-delay: 2625ms;
  animation-fill-mode: forwards;
}

.number-eleven {
  transform: translateY(-120px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-120 5202ms ease-in-out infinite;
  animation-delay: 580ms;
  animation-fill-mode: forwards;
}

.number-twelve {
  transform: translateY(-150px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-150 5504ms ease-in-out infinite;
  animation-delay: 4606ms;
  animation-fill-mode: forwards;
}

.number-thirteen {
  transform: translateY(-160px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-160 3634ms ease-in-out infinite;
  animation-delay: 1554ms;
  animation-fill-mode: forwards;
}

@keyframes hover {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  75% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fadeNumberDown-10 {
  0% {
    transform: translateY(-10px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(140px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-20 {
  0% {
    transform: translateY(-20px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(140px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-30 {
  0% {
    transform: translateY(-30px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(130px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-50 {
  0% {
    transform: translateY(-50px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(110px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-60 {
  0% {
    transform: translateY(-60px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(90px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-70 {
  0% {
    transform: translateY(-70px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(80px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-80 {
  0% {
    transform: translateY(-80px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(80px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-90 {
  0% {
    transform: translateY(-90px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(60px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-100 {
  0% {
    transform: translateY(-100px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(60px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-110 {
  0% {
    transform: translateY(-110px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(30px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-120 {
  0% {
    transform: translateY(-120px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(20px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-150 {
  0% {
    transform: translateY(-150px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(10px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-160 {
  0% {
    transform: translateY(-160px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(10px) translateZ(0);
    opacity: 0;
  }
}


@media only screen and (max-width: 496px){
  .illustration{
    width: 300px !important;
  }
}


@media only screen and (max-width: 350px){
  .illustration{
    width: 250px !important;
  }
}


/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */


/* Image Show Sections Start Here */

/* #paper-sections{
  background-color: rgba(0, 255, 255, 0.199);
  padding: 40px 0px;
} */

.random_bg{
  position: relative;
  padding: 40px 0px;
}

.paper-shadow,#app,.papers,.paper,.shadow,.segment,.paper.-rogue,*:before, *:after{
  box-sizing: border-box;
  position: relative;
  transform-style: preserve-3d;
}

:root {
  --duration: 3.2s;
  --stagger: .65s;
  --easing: cubic-bezier(.36,.07,.25,1);
  --offscreen: 130vmax;
  --color-bg: #EF735A;
  --color-blue: #384969;
  --color-shadow: #211842;
}



#paper-sections {
  display: flex;
  justify-content: center;
  align-items: center;
}

#app {
  height: 70vmin;
  width: 40vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(25vw) rotateX(-20deg) rotateY(-55deg);
  background: var(--color-blue);
  border-radius: 2vmin;
  perspective: 10000px;
}
#app:before {
  border: 10vmin solid white;
  border-left-width: 2vmin;
  border-right-width: 2vmin;
  border-radius: inherit;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border: 10vmin solid white;
  border-left-width: 2vmin;
  border-right-width: 2vmin;
  background: var(--color-blue);
}
#app > .papers, #app:before {
  transform: translateZ(3vmin);
}
#app:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
  transform: translateZ(1.5vmin);
}
#app > .shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  transform: rotateX(90deg);
  background: var(--color-shadow);
  border-radius: inherit;
}

.paper-shadow {
  background: url('..//img/header_banner.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  /* background: var(--color-shadow); */
  height: 50%;
  width: 100%;
  position: absolute;
  top: calc(100% + 3vmin);
  left: 0;
  transform-origin: top center;
  -webkit-animation: shadow-in var(--duration) var(--easing) infinite;
          animation: shadow-in var(--duration) var(--easing) infinite;
  -webkit-animation-delay: calc(var(--i) * var(--stagger));
          animation-delay: calc(var(--i) * var(--stagger));
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@-webkit-keyframes shadow-in {
  0%, 5% {
    transform: scale(0.8, 1) translateY(var(--offscreen));
  }
  100% {
    transform: scale(0.8, 0);
  }
}
@keyframes shadow-in {
  0%, 5% {
    transform: scale(0.8, 1) translateY(var(--offscreen));
  }
  100% {
    transform: scale(0.8, 0);
  }
}

.papers {
  width: 30vmin;
  height: 40vmin;
  background: url('..//img/header_banner.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.paper {
  --segments: 5;
  --segment: calc(100% * 1 / var(--segments));
  position: absolute;
  background:url('..//img/header_banner.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-animation: fly-in var(--duration) var(--easing) infinite;
          animation: fly-in var(--duration) var(--easing) infinite;
  -webkit-animation-delay: calc( (var(--i) * var(--stagger)) );
          animation-delay: calc( (var(--i) * var(--stagger)) );
}
@-webkit-keyframes fly-in {
  0%, 2% {
    transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
  }
  80%, 100% {
    transform: translateZ(0px) translateY(0%) rotateX(0deg);
  }
}
@keyframes fly-in {
  0%, 2% {
    transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
  }
  80%, 100% {
    transform: translateZ(0px) translateY(0%) rotateX(0deg);
  }
}
.paper > .segment {
  height: var(--segment);
}

.segment {
  --rotate: 20deg;
  height: 100%;
  transform-origin: top center;
  /* background: #0bceaf; */
  /* border: 1px solid #0bceaf; */
  border-top: none;
  border-bottom: none;
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: curve-paper;
          animation-name: curve-paper;
}
.segment > .segment {
  top: 98%;
}
@-webkit-keyframes curve-paper {
  0%, 2% {
    transform: rotateX(var(--rotate, 0deg));
  }
  90%, 100% {
    transform: rotateX(0deg);
  }
}
@keyframes curve-paper {
  0%, 2% {
    transform: rotateX(var(--rotate, 0deg));
  }
  90%, 100% {
    transform: rotateX(0deg);
  }
}

/* ---------------------------------- */
.paper.-rogue {
  transform-origin: top center -5vmin;
}
.paper.-rogue .segment {
  --rotate: 30deg;
  -webkit-animation-name: curve-rogue-paper;
          animation-name: curve-rogue-paper;
}
@-webkit-keyframes curve-rogue-paper {
  0%, 50% {
    transform: rotateX(var(--rotate));
  }
  100% {
    transform: rotateX(0deg);
  }
}
@keyframes curve-rogue-paper {
  0%, 50% {
    transform: rotateX(var(--rotate));
  }
  100% {
    transform: rotateX(0deg);
  }
}
.paper.-rogue > .segment {
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: rogue-paper;
          animation-name: rogue-paper;
  transform-origin: left top 20vmin;
}
@-webkit-keyframes rogue-paper {
  0%, 2% {
    transform: rotateX(1.5turn);
  }
  80%, 100% {
    transform: rotateX(0turn);
  }
}
@keyframes rogue-paper {
  0%, 2% {
    transform: rotateX(1.5turn);
  }
  80%, 100% {
    transform: rotateX(0turn);
  }
}